<template>
  <view
    class="contents-box"
    @click="handleClickon(data)"
  >

    <view style="display:flex;width:100%;">
      <view style="width:70%;word-wrap: break-word">
        <view class="title">
          {{data.name}}
          <view
            class="iconleft"
            style="color: #ffffff;"
          >{{data.status}}</view>
          <view class="status">
            <view
              v-if="!data.deal"
              style="color:#FFF"
              class="nofinish"
            >此条异常未处理</view>
          </view>
        </view>
        <view
          class="detail"
          style="float:left"
        >
          <view class="time">
            <image
              src="../../static/images/number.png"
              class="imageBg"
            />
            <view class="text">产品代码：{{data.sn}}</view>
          </view>
          <view class="time">
            <image
              src="../../static/images/guige.png"
              class="imageBg"
            />
            <view class="text">产品型号：{{data.code}}</view>
          </view>
        </view>
      </view>
      <view style="">
        <image
          v-if="data.photo"
          style="width:180rpx;height:160rpx;margin-top: 15rpx;"
          mode="aspectFill"
          @click.stop="handleImage(fileUrl+data.photo)"
          :src="fileUrl+data.photo"
        />
        <image
          v-else
          style="width:180rpx;height:160rpx;margin-top: 15rpx;"
          mode="aspectFill"
          @click.stop="noimage()"
          src="@/static/zanwutupian1-copy-copy (1).png"
        />
      </view>
    </view>
    <view class="btn">
      <text
        class="sumarry"
        @click.stop='handleClick(data)'
      >删除</text>
      <text
        class="sumarry"
        @click.stop='handleClickon(data)'
      >详情</text>
    </view>
  </view>

</template>
<script>
import { productProperty } from "@/api/index.js";
export default {
  props: {
    data: {
      type: Object,
      default: 0
    },
    id: {
      type: String,
      default: ""
    },
    timeone: {
      type: String,
      default: ""
    },
    hour: {
      type: String,
      default: ""
    },
    category: {
      type: String,
      default: ""
    },
    minute: {
      type: String,
      default: ""
    },
    second: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      src: "./1.png",
      remark: "",
      imgsrc: "",
      productId: 0,
      projectId: 0
    };
  },
  created() {
    if (this.data.productId) {
      this.productId = this.data.productId;
      this.projectId = this.data.projectId;
    }
  },
  methods: {
    handleClickon(data) {
      let phone = "";
      if (data.salePhone) {
        phone = data.salePhone;
      } else {
        phone = "";
      }
      let manufacturer = "";
      if (data.manufacturer) {
        manufacturer = data.manufacturer;
      } else {
        manufacturer = "";
      }
      uni.navigateTo({
        url:
          "/pages/detail/detail?taskDeviceId=" +
          data.id +
          "&Id=" +
          this.id +
          "&timeone=" +
          this.timeone +
          "&hour=" +
          this.hour +
          "&minute=" +
          this.minute +
          "&second=" +
          this.second +
          "&productId=" +
          this.productId +
          "&phone=" +
          phone +
          "&projectId=" +
          this.projectId +
          "&manufacturer=" +
          manufacturer +
          "&deviceId=" +
          data.deviceId +
          "&category=" +
          this.category
      });
    },
    handleImage(e) {
      var images = [];
      images.push(e);
      uni.previewImage({
        current: 0,
        urls: images,
        longPressActions: {
          itemList: ["保存图片"],
          success: data => {
            uni.saveImageToPhotosAlbum({
              //保存图片到相册
              filePath: payUrl,
              success: function() {
                uni.showToast({ icon: "success", title: "保存成功" });
              },
              fail: err => {
                uni.showToast({ icon: "none", title: "保存失败，请重新尝试" });
              }
            });
          },
          fail: function(err) {}
        }
      });
    },
    allimage(data) {
      this.$emit("editClick", data);
    },
    handleClick(data) {
      this.$emit("deleteClick", data);
    },
    noimage() {}
  }
};
</script>

<style lang="scss" scoped>
.btn {
  float: right;
  font-size: 30rpx;
  margin-top: 30rpx;
}
.sumarry {
  margin: 10rpx 20rpx 20rpx 30rpx;
  color: #0f6dff;
}
.contents-box {
  width: 100% !important;
  margin-bottom: 20rpx;
  background-color: white;
  border: 1px solid #eee;
  padding: 40rpx 40rpx 100rpx 40rpx;
  border-radius: 25rpx;
  box-shadow: 0 0 20rpx #eee;
  .card-box {
    width: 60%;
  }
  .image-box {
    position: absolute;
    right: 20rpx;
    width: 200rpx;
    height: 190rpx;
    image {
      width: 200rpx;
      height: 190rpx;
    }
  }

  .title {
    width: 100%;
    font-size: 34rpx;
    font-weight: 600;
    margin-bottom: 10rpx;
    color: #333333;
    .status {
      position: absolute;
      text-align: center;

      //
      top: 0rpx;
      right: 0rpx;
      .finish {
        width: 202rpx;
        font-size: 22rpx;
        // height: 31rpx;
        line-height: 31rpx;
        background: linear-gradient(145deg, #09bb07, #008b00);
        border-bottom-left-radius: 40rpx;
        border-top-right-radius: 25rpx;
      }
      .nofinish {
        width: 210rpx;
        font-size: 22rpx;
        line-height: 31rpx;
        padding: 6rpx;
        background: linear-gradient(145deg, #ff9494, #ff0000);
        border-bottom-left-radius: 40rpx;
        border-top-right-radius: 25rpx;
      }
      // float: right;
      // margin-top: 2rpx;
      // margin-right: 10rpx;
    }
    .iconleft {
      font-size: 22rpx;
      position: absolute;
      right: 0;
      top: 0;
      font-weight: 500;
      padding: 0rpx 30rpx;
      border-bottom-left-radius: 100rpx;
      border-top-right-radius: 32rpx;
      background: linear-gradient(-34deg, #1040be, #026dff);
    }
  }

  .detail {
    padding-top: 10rpx;
    padding-left: 10rpx;
    padding-bottom: 10rpx;
    margin: 0px 30rpx 0px 0px;
    color: #717171;
    width: 100%;
    .time {
      width: 100%;
      display: flex;
      margin-bottom: 20rpx;

      .imageBg {
        width: 25rpx;
        height: 25rpx;
        margin-right: 5rpx;
        padding: 4rpx;
        //  line-height: 25rpx;
      }
      .text {
        width: 80%;
        line-height: 30rpx;
        font-size: 24rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }

  .bottom {
    padding-top: 10rpx;
    color: #111;
  }
}
.bottombox {
  margin-top: 15rpx;
  width: 100%;
  height: 50rpx;
  display: inline-block;
  // position: absolute;
  // background-color: rgba(16, 91, 245, 74%);
  border-radius: 20px;
  color: blue;
  width: 170rpx;
  display: flex;
  // align-items: center; /*垂直居中 */
  // justify-content: center;
  // right: 65%;
  // bottom: 10%;
}

.bottombox1 {
  margin-top: 15rpx;
  width: 100%;
  height: 50rpx;
  position: absolute;
  background-color: rgba(16, 91, 245, 74%);
  border-radius: 20px;
  color: white;
  width: 170rpx;
  display: flex;
  align-items: center; /*垂直居中 */
  justify-content: center;
  right: 35%;
  bottom: 10%;
}

.bottombox2 {
  margin-top: 15rpx;
  width: 100%;
  height: 50rpx;
  position: absolute;
  // background-color: rgba(16,91,245,74%);
  border-radius: 20px;
  color: blue;
  width: 70rpx;
  display: flex;
  align-items: center; /*垂直居中 */
  justify-content: center;
  right: 5%;
  bottom: 8%;
}
</style>
